<template>
  <SubLayout @refresh="refresh" :showRefresh="true">
    <template #default>
      <!-- 详情 -->
      <InfoArea :data="dataInfo" />
      <!-- 表格 -->
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="changeTab">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.value">
          <template #label>
            <span class="custom-tabs-label">
              {{ item.name }} <span>（{{ item.num }}）</span>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <DynamicTable
        class="table-container"
        ref="DynamicTable" v-loading="listLoading" :total="total"
        v-model:current="page.current" v-model:size="page.size" :data="list" :columns="tableColumns"
        @pagination="getList" />
    </template>
  </SubLayout>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import InfoArea from "./components/Info.vue";
import { useListManage } from "@/hooks";
import { useRouter, useRoute } from 'vue-router';
import DynamicTable from "@/components/DynamicTable";
import SubLayout from '@/components/SubLayout';
import { ElMessage, ElMessageBox } from 'element-plus';

import { getAppDetail, getAppSvcPageList, getAppModePageList } from "@/api/application";
import { columns } from './components/tableColumns'
export default defineComponent({
  name: "MeansCascadeDetail",
  components: {
    SubLayout,
    InfoArea,
    Header,
    FilterBar,
    DynamicTable
  },
  setup(props, { emit }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.back()
    }
    const activeTab = ref("1")
    const tabList = ref([
      {
        name: '服务列表',
        value: "1",
        num: 0,
        fun: getAppSvcPageList
      },
      {
        name: '事件列表',
        value: "2",
        num: 0,
        fun: getAppModePageList
      },
      {
        name: '订阅服务',
        value: "3",
        num: 0,
        fun: getAppSvcPageList
      },
      {
        name: '订阅事件',
        value: "4",
        num: 0,
        fun: getAppModePageList
      }
    ])
    // 切换表格
    const changeTab = (tab, event) => {
      activeTab.value = tab.props.name
      page.current = 1
      tableColumns.value = [...columns[activeTab.value], ...defaultColums]
      getList()
    }
    // 应用详情
    const dataInfo = ref({})
    const defaultColums = [
      {
        label: "状态",
        key: "desc",
        minWidth: "100px",
        render: (h, { row, index }) => (
          <span class={row.sts == 'A' ? 'online' : row.sts == 'D' ? 'outline' : 'test'}>
            {row.sts == 'A' ? '已上线' : row.sts == 'D' ? '未上线' : '草稿'}
          </span>
        ),
      },
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                size="small"
                onClick={() =>
                  activeTab.value % 2 == 0 ?
                    router.push(
                      `/application/details/event?id=${params.row.evtId}`
                    ) :
                    router.push(
                      `/application/details/service?id=${params.row.svcId}`
                    )
                }
              >
                详情
              </el-button>
            }
          </span>
        ),
      },
    ]
    const tableColumns = ref([...columns[activeTab.value], ...defaultColums])
    const getInfo = async () => {
      const res = await getAppDetail(localStorage.getItem('detailAppId')) // route.query.id
      dataInfo.value = res.data
      tableColumns.value = [...columns[activeTab.value], ...defaultColums]
      tabList.value[0].num = res.data.svcNum
      tabList.value[1].num = res.data.evtNum
      tabList.value[2].num = res.data.svcPermsNum
      tabList.value[3].num = res.data.evtPermsNum
      getList()
    }

    const getList = async (pageNumber = 1, size = 20) => {
      page.current = pageNumber
      page.size = size
      listLoading.value = true;
      const queryParams = { ...query }
      const getItems = tabList.value.find(item => item.value == activeTab.value)?.fun
      const para = {
        ...queryParams,
        ...page,
      }
      if (activeTab.value == 1) {
        para.svcAppId =  localStorage.getItem('detailAppId') //route.query.id
      } else if (activeTab.value == 2) {
        para.evtAppId = localStorage.getItem('detailAppId') //route.query.id
      }
      if (activeTab.value > 2) {
        para.permsSts = '0'
      }
      const {
        status,
        message,
        data: { list: listData, total: totalCount },
      } = await getItems(para);
      listLoading.value = false;
      if (status === 200) {
        list.value = listData;
        total.value = totalCount;
      } else {
        ElMessage.warning(message);
      }
    };
    const refresh = () => {

    }
    const query = reactive({
      appId: localStorage.getItem('detailAppId') //route.query.id
    })
    let {
      page,
      list,
      total,
      listLoading,
    } = useListManage(props, emit, {
      getItems: null,
      query: query,
      deleteItem: null,
      getDetail: null,
    });

    onMounted(() => {
      getInfo();
    });

    return {
      dataInfo,
      activeTab,
      tabList,
      changeTab,
      page,
      list,
      total,
      listLoading,
      tableColumns,
      getList,
      goBack,
      refresh
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 380px);
}
:deep(.pagination-container){
  padding-bottom: 20px;
}
.custom-tabs-label {
  >span {
    color: rgba(0, 0, 0, 0.6);
  }
}

.is-active {
  .custom-tabs-label {
    >span {
      color: inherit;
    }
  }
}

.page-main {
  position: relative;
  padding-bottom: 70px;
}

footer {
  text-align: right;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 90px;
  padding: 20px;
  line-height: 90px;
  background: #fff;
}

:deep(.online) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(42, 207, 138, 1);
  color: rgba(42, 207, 138, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/online.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.outline) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 139, 58, 1);
  color: rgba(255, 139, 58, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.test) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid #909399;
  color: #909399;
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}
</style>